import React, { useEffect, useRef, useState } from 'react';
import * as Font from 'expo-font';
import AppStack from './app/navigate/navigate'
import { View, TouchableOpacity, StyleSheet, Platform, Text } from 'react-native';
import { MainLayout } from './app/component';
import { width } from './app/GLOBAL';
// import { VLCPlayer, VlCPlayerView } from 'react-native-vlc-media-player';
// import {
//   ApiVideoLiveStreamView,
//   PredefinedResolution,
// } from '@api.video/react-native-livestream';
// export interface ISettingsState {
//   resolution: PredefinedResolution;
//   framerate: number;
//   videoBitrate: number;
//   audioBitrate: number;
//   rtmpEndpoint: string;
//   streamKey: string;
// }

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);
  // const [camera, setCamera] = React.useState<'front' | 'back'>('front');
  // const [warning, setWarning] = React.useState<{
  //   display: boolean;
  //   message: string;
  // }>({ display: false, message: '' });
  // const [settings, setSettings] = React.useState<ISettingsState>({
  //   resolution: '720p',
  //   framerate: 30,
  //   videoBitrate: 500,
  //   audioBitrate: 64000,
  //   rtmpEndpoint: 'rtmp://vp-push-ix1.edgestream.ru/in',
  //   streamKey: '694415?28234479b494c9d19fe1fe26877f90ae',
  // });
  async function preload() {
    try {
      const font = {
        
      }
      await Font.loadAsync(font)

      await new Promise(resolve => setTimeout(resolve, 2000));
      setAppIsReady(true);
    } catch (error) {
      console.log(error);
      setAppIsReady(false)
    } 
  }

  useEffect(()=>{    
    preload().catch(e => console.log(e))
  },[])

  // const handleStreaming = (): void => {
  //   // Reset warning
  //   setWarning({ display: false, message: '' });
  //   // No RTMP
  //   if (settings.rtmpEndpoint.trim().length === 0) {
  //     setWarning({
  //       display: true,
  //       message: 'Please enter a valid RTMP endpoint in settings',
  //     });
  //     return;
  //   }
  //   // No stream key
  //   if (settings.streamKey.trim().length === 0) {
  //     setWarning({
  //       display: true,
  //       message: 'Please enter a valid stream key in settings',
  //     });
  //     return;
  //   }

  //   if (streaming) {
  //     ref.current?.stopStreaming();
  //     setStreaming(false);
  //   } else {
  //     ref.current
  //       ?.startStreaming(settings.streamKey, settings.rtmpEndpoint)
  //       .then((_: boolean) => {
  //         console.log('Streaming started');
  //         setStreaming(true);
  //       })
  //       .catch((e: any) => {
  //         console.log('Failed to start streaming: ', e);
  //         setWarning({
  //           display: true,
  //           message: `Failed to start streaming: ${e}`,
  //         });
  //         setStreaming(false);
  //       });
  //   }
  // };

  // const ref = useRef(null);
  // const [audioMuted, setAudioMuted] = React.useState(false);
  // const [streaming, setStreaming] = React.useState(false);
  // const [vlc, setVlc] = React.useState(false);
  return (appIsReady&&
    <MainLayout> 
      <AppStack/>
      {/* {vlc &&<VLCPlayer
        style={{width:width, height:(width/(1920/1080)), marginBottom:30, zIndex:89}}
        videoAspectRatio="16:9"
        source={{ uri: "https://139862.edgelive.co/streams/139862_694415/playlist.m3u8"}}
      />}
      <ApiVideoLiveStreamView
        style={{width:width, height:(width/(1920/1080))}}
        ref={ref}
        camera={camera}
        video={{
          bitrate: settings.videoBitrate * 1000,
          fps: settings.framerate,
          resolution: settings.resolution,
        }}
        audio={{
          bitrate: settings.audioBitrate,
          sampleRate: 44100,
          isStereo: true,
        }}
        isMuted={audioMuted}
        enablePinchedZoom={true}
        onConnectionSuccess={() => {
          console.log('Received onConnectionSuccess');
          setTimeout(() => setVlc(true), 1500);
        }}
        onConnectionFailed={(reason: string) => {
          console.log('Received onConnectionFailed: ' + reason);
          setVlc(false)
          setStreaming(false);
        }}
        onDisconnect={() => {
          console.log('Received onDisconnect');
          setVlc(false)
          setStreaming(false);
        }}
        onPermissionsDenied={(permissions: string[]) => {
          console.log('Received onPermissionsDenied: ' + permissions);
        }}
      />
      <View style={button({ bottom: Platform.OS == 'android' ? 20 : 40 }).container}>
        <TouchableOpacity style={{padding:5, backgroundColor:"blue", marginBottom:30}} onPress={()=>{
          if (camera=="back") {
            setCamera('front')
          } else{
            setCamera('back')
          }
        }}>
          <Text>Camera : {camera}</Text>
        </TouchableOpacity>

        <TouchableOpacity style={{padding:5, backgroundColor:"red"}} onPress={handleStreaming}>
          {streaming ? (
            <Text>Off streaming</Text>
          ) : (
            <Text>On streaming</Text>
          )}
        </TouchableOpacity>
      </View> */}
    </MainLayout>
  );
}
// interface IButtonParams {
//   top?: number;
//   bottom?: number;
//   left?: number;
//   right?: number;
// }
// export const button = (position: IButtonParams) =>
//   StyleSheet.create({
//     container: {
//       position: 'absolute',
//       top: position.top,
//       bottom: position.bottom,
//       left: position.left,
//       right: position.right,
//     },
//   });